<template>
  <div>
    <div class="operation-quick-entry">
      <div class="title-container">
        <div class="circle-number">1</div>
        <div class="title">运营快捷入口</div>
      </div>
    </div>

    <div class="quick-entry-list">
      <router-link
        v-for="(item, index) in items"
        :key="index"
        :to="item.path"
        class="list-item"
      >
        <div class="item-container">
          <img :src="item.image" class="item-image" />
          <div class="item-title">{{ item.name }}</div>
        </div>
      </router-link>
    </div>

    <div class="operation-quick-entry">
      <div class="title-container">
        <div class="circle-number">2</div>
        <div class="title">
          业务预警提示&nbsp;<span style="font-size: 15px"
            >（未完成的表单与库存的预警）</span
          >
        </div>
      </div>
    </div>
    <div class="quick-entry-ordes">
      <el-tabs :tab-position="tabPosition" style="height: 320px;" >
        <el-tab-pane label="销售订单" label-class-name="my-label" >
          <el-table :data="SalesList" style="width:100%" border>
          <el-table-column prop="SalesNumber" label="序号" width="70px" align="center"></el-table-column>
          <el-table-column prop="so_code" label="销售订单编号" align="center"></el-table-column>
          <el-table-column prop="client_head" label="客户姓名" align="center"></el-table-column>
          <el-table-column prop="so_to_pay" label="订单金额" align="center"></el-table-column>
          <el-table-column prop="so_packaging" label="打包方式" align="center"></el-table-column>
          <el-table-column prop="so_sales_date" label="销售日期" align="center">
            <template slot-scope="scope">
                <span>{{ formatDate(scope.row.so_sales_date) }}</span>
              </template>
          </el-table-column>
          <el-table-column label="操作" width="200px" align="center">
            <template>
              <el-button size="mini" type="primary" icon="el-icon-edit"  @click="goToSalesOrder">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-divider></el-divider> <!-- 下划线分隔 -->
        <!-- 分页 -->
        <div>
          <el-pagination class="pagination"
            @size-change="Change1"
            @current-change="YmChange1"
            :current-page="currentPage1"
            :page-sizes="[5, 10, 20, 50]" 
            :page-size="pageSize1"
            layout="total, sizes, prev, pager, next, jumper" 
            :total="salerows">
          </el-pagination>
        </div>
        </el-tab-pane>
        <el-tab-pane label="生产订单">
          <el-table :data="ProOrdersList" style="width:100%" border>
            <el-table-column prop="ProOrdersNumber" label="序号" width="70px" align="center"></el-table-column>
            <el-table-column prop="po_number" label="生产订单编号" align="center"></el-table-column>
            <el-table-column prop="po_code" label="客户姓名" align="center"></el-table-column>
            <el-table-column prop="po_deadline" label="截止日期" align="center">
              <template slot-scope="scope">
                <span>{{ formatDate(scope.row.po_deadline) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="po_warehouse" label="订单状态" align="center">
              <template slot-scope="scope">
              <span
                :style="{
                    color: scope.row.po_warehouse == 1   ? '#2ab600' : 'red',
                }"
              >{{ scope.row.po_warehouse == 1 ? '已完成' : '未完成' }}</span>
            </template>
            </el-table-column>
            <el-table-column prop="po_initiation_date" label="发起日期" align="center">
              <template slot-scope="scope">
                <span>{{ formatDate(scope.row.po_initiation_date) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200px" align="center">
              <template>
                <el-button size="mini" type="primary" icon="el-icon-edit" @click="goToProOrders">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        <el-divider></el-divider> <!-- 下划线分隔 -->
        <!-- 分页 -->
        <div>
          <el-pagination class="pagination"
            @size-change="Change2"
            @current-change="YmChange2"
            :current-page="currentPage2"
            :page-sizes="[5, 10, 20, 50]" 
            :page-size="pageSize2"
            layout="total, sizes, prev, pager, next, jumper" 
            :total="prorows">
          </el-pagination>
        </div>
        </el-tab-pane>
        <el-tab-pane label="采购订单">
          <el-table :data="modifiedList" style="width:100%" border>
            <el-table-column prop="serialNumber" label="序号" width="70px" align="center"></el-table-column>
            <el-table-column prop="ord_number" label="采购订单编号" align="center"></el-table-column>
            <el-table-column prop="ord_supplier" label="供货商" align="center"></el-table-column>
            <el-table-column prop="ord_amount_due" label="订单金额" align="center"></el-table-column>
            <el-table-column prop="ord_to_pay" label="订单欠款" align="center"></el-table-column>
            <el-table-column prop="ord_purchase_date" label="采购日期" align="center">
              <template slot-scope="scope">
                <span>{{ formatDate(scope.row.ord_purchase_date) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template>
                <el-button size="mini" type="primary" icon="el-icon-edit" @click="goToPurchase">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        <el-divider></el-divider> <!-- 下划线分隔 -->
        <!-- 分页 -->
        <div>
          <el-pagination class="pagination"
            @size-change="Change3"
            @current-change="YmChange3"
            :current-page="currentPage3"
            :page-sizes="[5, 10, 20, 50]" 
            :page-size="pageSize3"
            layout="total, sizes, prev, pager, next, jumper" 
            :total="rows">
          </el-pagination>
        </div>
        </el-tab-pane>
        <el-tab-pane label="销售退货单">
          <el-table :data="SalReturn" style="width:100%" border>
            <el-table-column prop="SalReturnNumber" label="序号" width="70px" align="center"></el-table-column>
            <el-table-column prop="return_code" label="退货订单编号" align="center"></el-table-column>
            <el-table-column prop="so_code" label="订单编号" align="center"></el-table-column>
            <el-table-column prop="client_head" label="联系人" align="center"></el-table-column>
            <el-table-column prop="client_phone" label="联系方式" align="center"></el-table-column>
            <el-table-column prop="return_date" label="退货日期" align="center">
              <template slot-scope="scope">
                <span>{{ formatDate(scope.row.return_date) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200px" align="center">
              <template>
                <el-button size="mini" type="primary" icon="el-icon-edit"  @click="goToSalReturn">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        <el-divider></el-divider> <!-- 下划线分隔 -->
        <!-- 分页 -->
        <div>
          <el-pagination class="pagination"
            @size-change="Change4"
            @current-change="YmChange4"
            :current-page="currentPage4"
            :page-sizes="[5, 10, 20, 50]" 
            :page-size="pageSize4"
            layout="total, sizes, prev, pager, next, jumper" 
            :total="returnrows">
          </el-pagination>
        </div>
        </el-tab-pane>
         <el-tab-pane label="采购退货单" >
          <el-table :data="PurReturn" style="width:100%" border>
            <el-table-column prop="PurReturnNumber" label="序号" width="70px" align="center"></el-table-column>
            <el-table-column prop="return_code" label="退货订单编号" align="center"></el-table-column>
            <el-table-column prop="ord_number" label="退货订单编号" align="center"></el-table-column>
            <el-table-column prop="client_head" label="联系人" align="center"></el-table-column>
            <el-table-column prop="client_phone" label="联系方法" align="center"></el-table-column>
            <el-table-column prop="return_date" label="退货日期" align="center">
              <template slot-scope="scope">
                <span>{{ formatDate(scope.row.return_date) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200px" align="center">
              <template>
                <el-button size="mini" type="primary" icon="el-icon-edit"  @click="goToPurReturn">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        <el-divider></el-divider> <!-- 下划线分隔 -->
        <!-- 分页 -->
        <div>
          <el-pagination class="pagination"
            @size-change="Change5"
            @current-change="YmChange5"
            :current-page="currentPage5"
            :page-sizes="[5, 10, 20, 50]" 
            :page-size="pageSize5"
            layout="total, sizes, prev, pager, next, jumper" 
            :total="zalesrows">
          </el-pagination>
        </div>
        </el-tab-pane>

      </el-tabs>
    </div>  
  </div>
</template>

<script>
import $http from '@/routers/base';
import { MessageBox } from 'element-ui';
import moment from 'moment'
export default {
  data() {
    return {
      items: [
        {
          name: "生产入库",
          path: "/pro_WareHousing",
          image: "../images/Snipaste_2024-04-10_16-02-45.png",
        },
        {
          name: "销售出库",
          path: "/sale_SaleOut",
          image: "../images/Snipaste_2024-04-10_16-03-23.png",
        },
        {
          name: "生产订单",
          path: "/pro_orders",
          image: "../images/Snipaste_2024-04-10_16-03-46.png",
        },
        {
          name: "销售订单",
          path: "/sale_SaleOrder",
          image: "../images/Snipaste_2024-04-10_16-04-03.png",
        },
        {
          name: "采购订单",
          path: "/pur_Purchase",
          image: "../images/Snipaste_2024-04-10_16-04-22.png",
        },
      ],

      tabPosition: 'left',

      //销售订单
      currentPage1: 1, //当前页
      pageSize1: 5, //每页显示数
      salerows: 0, //总行数
      saleOrderData:[],

      //生产订单
      currentPage2: 1, //当前页
      pageSize2: 5, //每页显示数
      prorows: 0, //总行数
      prorders:[],

      //采购订单
      currentPage3: 1, //当前页
      pageSize3: 5, //每页显示数
      rows: 0, //总行数
      order:[],
  
      //销售退货
      currentPage4: 1, //当前页
      pageSize4: 5, //每页显示数
      returnrows: 0, //总行数
      saleReturnData:[],

      //采购退货
      currentPage5: 1, //当前页
      pageSize5: 5, //每页显示数
      zalesrows: 0, //总行数
      salesRtourn:[],

    };
  },

  computed: {
    //采购序号
    modifiedList() {
      // 遍历list数组，为每个元素添加一个序号属性
      return this.order.map((item, index) => {
        return Object.assign({}, item, { serialNumber: index + 1 });
      });
    },
    //销售序号
    SalesList(){
      // 遍历list数组，为每个元素添加一个序号属性
      return this.saleOrderData.map((item, index) => {
        return Object.assign({}, item, { SalesNumber: index + 1 });
      });
    },
    //生产序号
    ProOrdersList() {
      // 遍历list数组，为每个元素添加一个序号属性
      return this.prorders.map((item, index) => {
        return Object.assign({}, item, { ProOrdersNumber: index + 1 });
      });
    },
    //销售退货序号
    SalReturn() {
      // 遍历list数组，为每个元素添加一个序号属性
      return this.saleReturnData.map((item, index) => {
        return Object.assign({}, item, { SalReturnNumber: index + 1 });
      });
    },
    //销售退货序号
    PurReturn() {
      // 遍历list数组，为每个元素添加一个序号属性
      return this.salesRtourn.map((item, index) => {
        return Object.assign({}, item, { PurReturnNumber: index + 1 });
      });
    },
  },

  methods: {
    //日期转型
    formatDate(dateString) {
      if (!dateString) {
        return '';
      }
        const date = new Date(dateString);
      if (isNaN(date.getTime())) {
        return '';
      }
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, '0');
        const day = date.getDate().toString().padStart(2, '0');
        return `${year}-${month}-${day}`;
    },
    //销售订单跳转
    goToSalesOrder() {
      // 使用路由进行页面跳转
      this.$router.push({
        path: '/sale_SaleOrder',
      });
    },
    //生产订单跳转
    goToProOrders() {
      // 使用路由进行页面跳转
      this.$router.push({
        path: '/pro_orders',
      });
    },
    //采购订单跳转
    goToPurchase() {
      // 使用路由进行页面跳转
      this.$router.push({
        path: '/pur_Purchase',
      });
    },
    //销售退货跳转
    goToSalReturn() {
      // 使用路由进行页面跳转
      this.$router.push({
        path: '/sale_SaleReturn',
      });
    },
    //采购退货跳转
    goToPurReturn() {
      // 使用路由进行页面跳转
      this.$router.push({
        path: '/pur_Zales_Return',
      });
    },


    //销售分页查询
    SalesIndexQuery(){
      this.where="so_status = 0"
      $http.get('SalesOrder/getFenYe',{
        params:{
          currentPage: this.currentPage1,
          pageSize: this.pageSize1,
          where:this.where,
        }
      }).then(res=>{
          this.saleOrderData=res.saleOrderData;
          this.salerows=res.rows;
      }).catch(error=>{
          console.error('Error fetching client data: ', error);
      })
    }, 
    Change1: function(size) {
      this.pageSize1 = size;
      this.currentPage1 = 1;
      this.SalesIndexQuery();
    },
    YmChange1: function(page) {
      this.currentPage1 = page;
      this.SalesIndexQuery();
    },

    //生产分页查询
    ProOrderIndexQuery(){
      this.where="po_warehouse = 0"
      $http.get('ProRders/getFenYe',{
        params:{
          currentPage: this.currentPage2,
          pageSize: this.pageSize2,
          where:this.where,
        }
      }).then(res=>{
          this.prorders=res.prorders;
          this.prorows=res.rows;
      }).catch(error=>{
          console.error('Error fetching client data: ', error);
      })
    }, 
    Change2: function(size) {
      this.pageSize2 = size;
      this.currentPage2 = 1;
      this.ProOrderIndexQuery();
    },
    YmChange2: function(page) {
      this.currentPage2 = page;
      this.ProOrderIndexQuery();
    },

    //采购分页查询
    PurOrderFenYe(){
      this.where="ord_state = 0"
      $http.get('PurchaseOrder/OrderFenYe',{
        params:{
          currentPage: this.currentPage3,
          pageSize: this.pageSize3,
          where:this.where,
        }
      }).then(res=>{
          this.order=res.order;
          this.rows=res.rows;
      }).catch(error=>{
          console.error('Error fetching client data: ', error);
      })
    }, 
    Change3: function(size) {
      this.pageSize3 = size;
      this.currentPage3 = 1;
      this.PurOrderFenYe();
    },
    YmChange3: function(page) {
      this.currentPage3 = page;
      this.PurOrderFenYe();
    },


    //销售退货分页查询
    SalReturnQuery(){
      this.where="so_out_status = 0"
      $http.get('SalesReturn/getFenYe',{
        params:{
          currentPage: this.currentPage4,
          pageSize: this.pageSize4,
          where:this.where,
        }
      }).then(res=>{
          this.saleReturnData=res.saleReturnData;
          this.returnrows=res.rows;
      }).catch(error=>{
          console.error('Error fetching client data: ', error);
      })
    }, 
    Change4: function(size) {
      this.pageSize4 = size;
      this.currentPage4 = 1;
      this.SalReturnQuery();
    },
    YmChange4: function(page) {
      this.currentPage4 = page;
      this.SalReturnQuery();
    },

    //采购分页查询
    PurReturnQuery(){
      this.where="so_out_status = 0"
      $http.get('PurSalesReturn/SalesRetFenYe',{
        params:{
          currentPage: this.currentPage5,
          pageSize: this.pageSize5,
          where:this.where,
        }
      }).then(res=>{
          this.salesRtourn=res.salesRtourn;
          this.zalesrows=res.rows;
      }).catch(error=>{
          console.error('Error fetching client data: ', error);
      })
    }, 
    Change5: function(size) {
      this.pageSize5 = size;
      this.currentPage5 = 1;
      this.PurReturnQuery();
    },
    YmChange5: function(page) {
      this.currentPage5 = page;
      this.PurReturnQuery();
    },
  },

  mounted(){
    this.SalesIndexQuery();//销售分页查询
    this.ProOrderIndexQuery();//生产分页查询
    this.PurOrderFenYe();//采购分页查询
    this.SalReturnQuery();//销售退货分页查询
    this.PurReturnQuery();//采购退货分页查询
  }
};
</script>
<style scoped src="../CSS/home.css"></style>
<style scoped>

</style>